<template>
  <div style="height: 100%">
    <navbar :title="$t('find_public_vote')"></navbar>
    <div class="content-noBottom" style="display: flex;flex-direction: column;">
      <van-dropdown-menu active-color="#075ebb">
        <van-dropdown-item v-model="pathParams.condition" :options="optionParticipation" @change="selectParticipation()"/>
        <van-dropdown-item v-model="pathParams.status" :options="optionStatus" @change="selectStatus()"/>
        <!-- <van-dropdown-item v-model="pathParams.source" :options="optionWork" @change="selectWork()"/> -->
      </van-dropdown-menu>
      <!--列表内容-->
       <div class="scroll-container" v-if="voteList.length > 0">
        <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
          <van-list
          v-model="isLoading"
          :finished="finished"
          :finished-text="(finished&&total>0) ? $t('no_more') : ''"
          loding-text="loading"
          @load="getPublicData"
          >
           <div class="content-container" v-for="item in voteList" :key="item.votId" @click="clickItem(item)">
             <p>{{item.votTitle}}</p>
             <div class="content-title">
               <span>{{$t('circle238')}}</span>
               <span>{{item.votEffDateTo}}</span>
             </div>
             <div class="content-bottom">
               <div style="display: flex">
                 <span class="border" :style="item.involved ? { backgroundColor: '#00BA5F'}:{ backgroundColor: '#ccc'}">{{checkType(item.involved)}}</span>
                 <span>{{item.involvedCount || '--' }}</span>
                 <span>{{$t('circle241')}}</span>
               </div>
               <div>
                 <span>{{item.authorName}}</span>
                 <span>{{$t('circle242')}}</span>
                 <span>{{item.votEffDateFrom | yyyyMMdd}}</span>
               </div>
             </div>
           </div>
           <common-loading :isLoading="isLoading"></common-loading>
          </van-list>
        </van-pull-refresh>
       </div>
      <!--暂无数据-->
      <div v-if="!isLoading && total <= 0" style="height: calc(100% - 100px)">
        <div class="box-table" style="width:100%;height:100%;">
          <div class="box-table-cell" style="text-align: center;">
            <div class="no-data">
              <img src="../../../../static/images/no-data.png" alt=""/>
              <p class="color999">{{ $t("no_data") }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {Dialog, DropdownMenu, DropdownItem} from 'vant';
export default {
    name: 'List',
    components: {
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        'van-dialog': Dialog.Component
    },
    data() {
        return {
            pathParams: {
                source: '',
                condition: '', //this.$route.query.INITIATED 屏蔽默认选项
                status: '',
                pageNo: 1,
                pageSize: 10,
                sortorder: 'DESC'
            },
            value: 0,
            isLoading: false,
            voteList: [],
            totalPage: 0,
            total: 0,
            //参与状态选择
            optionParticipation: [
                { text: this.$t('circle234'), value: '' },
                { text: this.$t('circle237'), value: 'INITIATED' },
                { text: this.$t('circle_activity_4'), value: 'INVOLVED' }
            ],
            //进行状态选择
            optionStatus: [
                { text: this.$t('circle234'), value: '' },
                { text: this.$t('circle235'), value: 'ongoing' },
                { text: this.$t('circle236'), value: 'finished' }
            ],
            //投票状态选择
            optionWork: [
                { text: this.$t('circle234'), value: '' },
                // { text: this.$t('Work_circle_voting'), value: 'workcircle' },
                { text: this.$t('find_public_vote'), value: 'public' }
            ],
            finished: false,
            isRefresh: false
        };
    },
    computed: {
        checkType() {
            return function(involved) {
                if (involved) {
                    return this.$t('circle239');
                }
                return this.$t('circle240');
            };
        }
    },
    mounted() {
        this.getPublicData('refresh');
    },
    methods: {
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pathParams.pageNo = 1;
                this.getPublicData('refresh');
                this.isRefresh = false;
            }, 900);
        },
        //获取公共投票数据
        getPublicData(option) {
            this.isLoading = true;
            this.$axios({
                url: '/app/api/trainee/voting/page',
                params: this.pathParams
            }).then(res => {
                if (option && option === 'refresh') {
                    this.voteList = res.data.results;
                } else {
                    this.voteList = [...this.voteList, ...res.data.results];
                }
                this.total = res.data.totalRecord;
                this.totalPage = res.data.totalPage;
                this.isLoading = false;
                this.pathParams.pageNo++;
                if (this.voteList.length >= this.total) {
                    this.finished = true;
                }
            }).catch(err => {
                this.isLoading = false;
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: err.response.data.errorMsg || err.response.data.errMsg
                });
            });
        },
        clickItem(item) {
            if (item.votWcId === 0) {
                this.$router.push({path: `/publicVoting/Detail/${item.votId}`});
            } else {
                this.$router.push({path: `/circle/vote/detail/${item.votId}`});
                // this.$router.push({path: '/circle/vote/detail', query: {votId: item.votId}});
            }
        },
        //选择参与状态
        selectParticipation() {
            this.pathParams.pageNo = 1;
            this.getPublicData('refresh');
        },
        //选择进行状态(){}
        selectStatus() {
            this.pathParams.pageNo = 1;
            this.getPublicData('refresh');
        },
        // 选择投票状态
        selectWork() {
            this.pathParams.pageNo = 1;
            this.getPublicData('refresh');
        }
    }
};
</script>

<style scoped lang="less">
 .scroll-container{
   flex: 1;
   height: 100px;
   .content-container{
     display: flex;
     flex-direction: column;
     max-height: 160px;
     background-color: #fff;
     margin-top: 10px;
     padding: 24px 12px 18px 16px;
     >p{
       width: 320px;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
       font-size: 14px;
       color: #333;
     }
     .content-title{
       padding-top: 14px;
       >span{
         font-size: 12px;
         color: #999;
       }
     }
     .content-bottom{
       padding-top: 22px;
       display: flex;
       justify-content: space-between;
       .border{
         display: block;
         width: 50px;
         line-height: 20px;
         text-align: center;
         justify-content: center;
         border-radius: 8px;
         font-size: 11px;
         color: #fff;
         margin-right: 10px;
       }
       span{
         line-height: 20px;
         font-size: 11px;
         color: #666;
       }
     }
   }
 }
</style>
